<template>
  <div class="recomm">
    <p class="title">热销推荐</p>
    <div class="list">
      <ul>
        <router-link :to="'/detail/' + item.id "  tag="li" v-for="item in recommendList" :key="item.id" class="item">
            <div class="left">
              <img :src="item.imgUrl" alt="">
            </div>
            <div class="right">
              <p class="item-title">{{ item.title }}</p>
              <p class="item-info">{{ item.desc }}</p>
              <button>查看详情</button>
            </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Recommend',
  props: ['recommendList']
}
</script>

<style lang="stylus" scoped>
  @import "~styles/mixins.styl"
  .title
    line-height:.8rem
    background-color: #eee
    text-indent 1em
    margin-top:.2rem
  .list > ul > .item
    display flex
    border-bottom 1px solid #cccccc
  ul > li > .left
    padding: .1rem
    width: 1.7rem
    height: 1.7rem
    float: left
    flex-shrink 0
  .left > img
    width: 100%
  ul > li > .right
    padding: .1rem
    flex 1
    min-width 0
  .right > .item-title
    font-size .32rem
    line-height:.54rem
    white-space nowrap
  .right > .item-info
    line-height:.4rem
    color: #cccccc
    //文字不换行，超过长度的会被截取掉,并省略号显示
    white-space nowrap
    text-overflow ellipsis
    overflow: hidden
  .right > button
    margin-top .2rem
    background-color: #ff9300
    color: #ffffff
    padding: 0 .2rem
    border-radius .06rem
    white-space nowrap
</style>
